<!--
 * @Author: Xujianchen
 * @Date: 2024-07-04 16:19:57
 * @LastEditors: Xujianchen
 * @LastEditTime: 2025-01-18 15:50:11
 * @Description: 二维码登录模拟
-->
<template>
  <Modal :model-value="modelValue" :title="data.value + '登录'" @close="close">
    <div class="code-box flex">
      <qrcode
        :value="data.value"
        :logo="loginQrcode"
        class="qrcode"
        size="200"
        logo-size="60"
      />
      <icon
        :name="data.value"
        :type="ICON_TYPE.SVG"
        :color="
          data.value === 'weixin'
            ? '#07c160'
            : data.value === 'alipay'
              ? '#0AE'
              : ''
        "
        size="30"
      />
    </div>
  </Modal>
</template>

<script setup>
import { ModalEmits } from '@/components/modal/emit'
import { ICON_TYPE } from '@/const'
import Qrcode from '@/components/qrcode'
import loginQrcode from '@/assets/images/login-qrcode.png'

const modelValue = defineModel({ type: Boolean, default: false })
defineProps({ data: Object })
const emit = defineEmits(ModalEmits)

function close() {
  modelValue.value = false
  emit('close')
}
</script>

<style lang="scss" scoped>
.code-box {
  flex-direction: column;
  justify-content: center;
}

.qrcode {
  margin: $space-medium-s 0;
}
</style>
